<template>
	<view class="music_player_list" style="padding: 20rpx;">
		<!-- 播放器主体 -->
		<view class="m_content">
			<view class="m_play">
				<text v-if="!show_btn" class="iconfont icon-bofang" @click="m_paly"></text>
				<text v-else class="iconfont icon-zanting " @click="m_stop"></text>
			</view>
			<view class="m_info">
				<view class="m_info_title">
					{{m_title}}
				</view>
				<view class="m_info_desc">
					<text>时长：{{m_duration}}s | {{m_currentTime}}s</text>
					<text>大小：{{m_size}}MB</text>
				</view>

			</view>
			<view class="m_down">
				<!-- <text class="iconfont icon-xiazai" @click="m_down"></text> -->
				<uni-icons type="loop" size="30" @click="m_down"></uni-icons>

			</view>

		</view>

	</view>
</template>

<script>
	export default {
		name: "music_palyer_list",
		watch: {
			m_src: {
				handler(newVal, oldVal) {
					console.info("改变了音乐", newVal, oldVal)
					this.m_destroy()
					this.createMusic()

				}
			}
		},
		props: {
			// 音频地址
			m_title: {
				default: '未命名'
			},
			m_size: {
				default: 0
			},
			m_src: {
				type: [String],
				default: ''
			},
			// 自动播放
			a_play: {
				type: [Boolean],
				default: false
			}
		},
		data() {
			return {
				innerAudioContext: null,
				m_duration: 0,
				m_currentTime: 0,
				// 显示播放与暂停按钮
				show_btn: false
			};
		},

		created() {
			this.createMusic()
			// this.innerAudioContext.src = "/storage/emulated/0/kgmusic/download/清尘 - Anak (remix：Freddie Aguilar) (Remix).mp3"
		},
		// 页面隐藏暂停播放

		onHide() {
			// 暂停播放
			console.info("隐藏")
			this.m_stop()
		},
		// 页面卸载销毁实例
		onUnload() {
			// 销毁实例
			this.m_destroy()
		},
		updated() {
			// console.log('再次渲染后')
		},
		activated() {
			console.log('当前组件被激活：显示')
		},
		deactivated() {
			console.log('当前组件隐藏')
		},
		beforeDestroy() {
			console.log('销毁前')
			this.innerAudioContext.pause()
			this.innerAudioContext.stop()
			this.innerAudioContext.destroy()
		},
		destroy() {
			console.log('销毁后')

		},
		methods: {
			createMusic() {
				// 创建音频实例
				this.innerAudioContext = uni.createInnerAudioContext();
				// 1秒后自动播放
				if (this.a_play) {
					setTimeout(() => {
						this.m_paly()
					}, 1000)
				}
				// 音频地址
				this.innerAudioContext.src = this.m_src
				this.m_duration = this.innerAudioContext.duration
				this.innerAudioContext.onError(callback => {
					console.info("播放失败")
					uni.showToast({
						title: "音频格式无效",
						icon: "error",
						mask: true,
					})
				})
			},
			// 播放
			m_paly() {
				this.innerAudioContext.play()
				this.show_btn = !this.show_btn

				// this.get_m_duration()
				// 更新时间
				this.m_time_update()
				// 自然播放结束
				this.m_ended()
			},
			// 暂停
			m_stop() {
				this.innerAudioContext.pause()
				this.show_btn = !this.show_btn
			},
			// 获取时间
			get_m_duration() {
				console.info(this.m_duration)
				this.innerAudioContext.onCanplay(() => {
					// 获取音频时间保留2为小数
					this.m_duration = this.innerAudioContext.duration.toFixed(2)
				})
			},
			// 更新时间
			m_time_update() {
				this.innerAudioContext.onTimeUpdate(() => {
					this.m_currentTime = this.innerAudioContext.currentTime.toFixed(2)
					this.m_destroy = this.innerAudioContext.destroy
					this.m_duration = this.innerAudioContext.duration.toFixed(2)
				})
			},
			// 音乐自然播放结束
			m_ended() {
				this.innerAudioContext.onEnded(() => {
					this.m_stop()
				})
			},

			// 销毁实例
			m_destroy() {},

			// 下载
			m_down() {
				this.$emit('m_down')
			}
		},
	}
</script>

<style lang="scss">
	@import "@/components/Qin-Music-Player/icon/iconfont.css";

	.music_player_list {
		padding: 10rpx;

		.m_content {
			width: 100%;
			height: 150rpx;
			position: relative;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.m_info view {
				flex: 1;
				line-height: 2;

				&:first-child {
					font-size: 15px;
					font-weight: bold;
					color: #3f3f3f;
					width: 450rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				&:last-child {
					font-size: 10px;
					color: #9a9a9a;
					display: flex;
					justify-content: space-between;
				}
			}

			.m_play,
			.m_down {
				width: 120rpx;
				text-align: center;

				.iconfont {
					font-size: 40px;
					color: #ff0749;
				}
			}

			.m_down .iconfont {
				font-size: 15px;
				background-color: #3f3f3f;
				color: #fff;
				padding: 15rpx;
				border-radius: 100px;
			}

			&::after {
				content: "";
				width: 96%;
				position: absolute;
				margin: 0 2%;
				z-index: -1;
				bottom: -15rpx;
				height: 80px;
				opacity: .4;
				border-radius: 10rpx;
				background-color: #fff;
			}
		}

	}
</style>